import React, { useState } from 'react';
import { useChatStore } from '@/store/ChatStore';
import './ChatContent.css';
import { FolderOutlined, SmileOutlined } from '@ant-design/icons';

const ChatContent: React.FC = () => {
  const { chats, selectedChatId, addMessage } = useChatStore();
  const [newMessage, setNewMessage] = useState('');
  const selectedChat = chats.find((chat) => chat.id === selectedChatId);

  const handleSendMessage = () => {
    if (newMessage.trim()) {
      addMessage(selectedChatId, '我', newMessage);
      setNewMessage('');
    }
  };

  return (
    <div className="custom-unique-chat-content">
      {selectedChat ? (
        <>
          <h2>{selectedChat.title}</h2>
          <div className="custom-chat-messages">
            {selectedChat.messages.map((msg, index) => (
              <div
                key={index}
                className={`custom-message ${msg.sender === '我' ? 'custom-sent' : 'custom-received'}`}
              >
                {msg.sender !== '我' && (
                  <img src='/1.jpg' alt="avatar" className="custom-avatar" style={{marginLeft:'20px'}} />
                )}
                <div className="custom-message-content">
                  <span className="custom-sender">{msg.message}</span> 
                </div>
                {msg.sender === '我' && (
                  <img src='/2.jpg' alt="avatar" className="custom-avatar" />
                )}
              </div>
            ))}
          </div>
          <div className="custom-chat-input-wrapper">
            <input
              type="text"
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
              className="custom-chat-input"
            />
            <div className='chat-input-bottom'>
            <div className='chat-input-icons-container'>
                <SmileOutlined className='chat-input-icon' />
                <FolderOutlined className='chat-input-icon' />
            </div>
            <button onClick={handleSendMessage} className="custom-send-button">
              发送
            </button>
            </div>
          </div>
        </>
      ) : (
        <div className="custom-no-chat-selected">请选择一个聊天记录</div>
      )}
    </div>
  );
};

export default ChatContent;
